import {Button, Col, Row} from "antd";
import {ModalForm, ProFormText} from "@ant-design/pro-components";
import {PlusOutlined} from "@ant-design/icons";
import React from "react";

interface IRoleEdit {
  isAdd: boolean;
  region?: API.IRegion;
  triggerButton?: React.ReactElement;
  onSubmit: (values: API.IRegion) => Promise<boolean>;
}

const RegionEditModel: React.FC<IRoleEdit> = ({isAdd, region, triggerButton, onSubmit}) => {

  return (
    <ModalForm
      title={isAdd ? '新增行政区域' : '编辑行政区域'}
      initialValues={region}
      onFinish={async (values: API.IRegion) => {
        await onSubmit?.(values);
        return true;
      }}
      autoFocusFirstInput
      trigger={triggerButton || <Button type="primary" icon={<PlusOutlined/>}> 新增行政区域</Button>}
      modalProps={{destroyOnClose: true}}
    >
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="district" label="区县" placeholder="请输入区县名称"
            rules={[{required: true, message: '请输入区县名称'}]}/>
        </Col>
        <Col span={12}>
          <ProFormText
            name="districtCode" label="区县编码" placeholder="请输入区县编码"
            rules={[{required: true, message: '请输入区县编码'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="city" label="城市" placeholder="请输入城市名称"
            rules={[{required: true, message: '请输入城市名称'}]}/>
        </Col>
        <Col span={12}>
          <ProFormText
            name="cityCode" label="城市编码" placeholder="请输入城市编码"
            rules={[{required: true, message: '请输入城市编码'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="province" label="省份'" placeholder="请输入省份名称"
            rules={[{required: true, message: '请输入省份名称'}]}/>
        </Col>
        <Col span={12}>
          <ProFormText
            name="provinceCode" label="省份编码" placeholder="请输入省份编码"
            rules={[{required: true, message: '请输入省份编码'}]}
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default RegionEditModel;
